<template>
  <div class="menu-area">
    <!-- <img src="@/assets/images/home/logo.png" class="logo" @click="jumpMet()" alt=""> undone-->
    <div class="user-info">
      <div class="default-name" v-if="userInfo.isJoinedAlliance == 0">{{ userInfo.userName }}</div>
      <div class="info" v-else>
        <div class="info-head">
          {{ userInfo.userName }}
          <span class="level-tag">V{{ userInfo.promoteLevel }}</span>
        </div>
        <div class="info-grow-up">
          <div class="text">Growth Value</div>
          <Progress :percent="comPercent" :stroke-width="7" status="active" style="width: 125px;">
            <Icon type="checkmark-circled"></Icon>
            <span>{{ formattedScore }}</span>
          </Progress>
        </div>
      </div>
    </div>
    <!-- 推广导航菜单 -->
    <Menu theme="light" @on-select="onSelect" :active-name="active" width="auto">
      <MenuItem name="AllianceHome" to="/Alliance">
      {{ $t('user.homePage') }}
      </MenuItem>
      <MenuItem name="wallet" to="/wallet">
      {{ $t('promote.card_tit_balance') }}
      </MenuItem>
      <MenuItem name="invite-user" to="/invite-user">
      {{ $t('user.invitedUser') }}
      </MenuItem>
      <MenuItem name="Freight-Brokerage" to="/Freight-Brokerage">
      {{ $t('personal.ShippingFees') }}
      </MenuItem>
      <MenuItem name="Product-Commission" to="/Product-Commission">
      {{ $t('routerTitle.product_title_name') }}
      </MenuItem>
      <MenuItem name="Event-Bonus" to="/Event-Bonus">
      {{ $t('promote.yel_tit_card') }}
      </MenuItem>
    </Menu>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      active: 'AllianceHome',
    }
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
    // 基于userInfo计算进度条百分比
    comPercent() {
      if (this.userInfo.targetPromoteLevelScore !== 0) {
        return (this.userInfo.promoteScore / this.userInfo.targetPromoteLevelScore) * 100;
      } else {
        return 0;
      }
    },
    formattedScore() {
      const score = this.userInfo.promoteScore;
      if (score > 10000) {
        const num = score / 10000;
        return num.toFixed(2) + 'w';
      }
      return score;
    }
  },
  created() {
    this.active = this.$route.name;
  },
  watch: {
    '$route'() {
      this.active = this.$route.name;
    }
  },
  methods: {
    onSelect(name) {
      this.active = name
    },
    jumpMet() {
      this.$router.push('/');
    }
  }
}
</script>
<style lang="less" scoped>
.menu-area {
  width: 100%;
  height: 635px;
  background: #FFFFFF;
  border-radius: 18px 18px 18px 18px;
  border: 1px solid #E8E8E8;
  padding: 37px 0;

  .logo {
    width: 183px;
    display: block;
    margin: 0 auto;
    cursor: pointer;
  }

  .user-info {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 24px;
    margin-left: 26px;
    margin-right: 26px;

    .default-name {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #1E1714;
      line-height: 19px;
    }

    .info {
      flex: 1;

      &-head {
        width: 100%;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #1E1714;
        line-height: 19px;
        display: inline-flex;
        align-items: baseline;
        gap: 8px;

        .level-tag {
          padding: 4px 13px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 14px;
          color: #FFFFFF;
          line-height: 16px;
          background: #1C1548;
          border-radius: 37px;
        }
      }

      &-grow-up {

        .text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 16px;
          color: #1E1714;
          line-height: 19px;
        }

        :deep(.ivu-progress) {
          text-wrap: nowrap;

          .ivu-progress-outer {
            .ivu-progress-inner {
              background-color: #FFEAF0;
            }
          }

          .ivu-progress-text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 18px;
            color: #FF186B;
            line-height: 21px;
          }
        }
      }
    }
  }
}
</style>
